<template>
  <view class="circle-item">
    <view class="cover" @click="linkTo(itemData.species_id)">
      <img :src="baseUrl + itemData.img" alt="" />
    </view>
    <view class="info-box">
      <view class="type"  @click="linkTo(itemData.species_id)">{{ itemData.type }}</view>
      <view class="hot"
        ><i class="iconfont icon-hot-fill"></i><span>热度：</span
        ><span>{{ itemData.active }}</span></view
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "CircleItem",
  data() {
    return {
      baseUrl: "http://172.17.145.161:3000/public/img/",
    };
  },

  props: {
    itemData: {
      requrie: true,
    },
  },

  components: {},

  methods: {
    linkTo(id) {
      uni.navigateTo({
        url:'/pages/Circle/CircleDetail/index?id='+id,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.circle-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  background: #fff;
  padding: 30rpx;
  .cover {
    height: 120rpx;
    width: 120rpx;
    img {
      height: 100%;
      width: 100%;
      border-radius: 20rpx;
    }
  }
  .info-box {
    margin-left: 30rpx;
    .type {
      font-size: 34rpx;
    }
    .hot {
      display: flex;
      margin-top: 20rpx;
      font-size: 30rpx;
      align-items: center;
      i {
        color: #e4743c;
      }
    }
  }
}
</style>
